import React, { memo } from 'react'
import {NavLink} from 'react-router-dom'
import { Input  } from "antd";
import { SearchOutlined } from "@ant-design/icons";
import { headerLinks } from "@/common/local-data";
import { HeaderWrapper, HeaderLeft,HeaderRight} from "./style";

export default memo(function HJAppHeader() {

  function showSelectItem(item,index) {
    if(index<3){
      return (
        <NavLink to={item.link}>
          {item.title}
          <i className="sprite_01 icon"></i>
        </NavLink>
      )
    }else {
       return (
        <a href={item.link}>{item.title}</a>
      )
    }
    
  }
  return (
    <HeaderWrapper>
      <div className="content wrap-v1">
       <HeaderLeft>
         <a className="logo sprite_01" href="#/">网易云音乐</a>
         <ul className="select-list">
           {
             headerLinks.map((item,index)=>{
               return (
                 <li className="select-item" key={item.title} >
                   {showSelectItem(item,index)}
                 </li>
               )
             })
           }
         </ul>
           
       </HeaderLeft>
       <HeaderRight>
            <Input  className="search" prefix={<SearchOutlined />} placeholder="音乐/视频/电台/用户"/>
            <div className="center">创作者中心</div>
            <div className="login">登录</div>
       </HeaderRight>
      </div>
      <div className="divider"></div>
    </HeaderWrapper>
  )
})
